<template>
  <svg
    width="300"
    viewBox="0 0 800 500"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      v-if="type === 'default'"
    >
      <rect
        id="svg_7"
        stroke-width="0"
        stroke="#000"
        height="500"
        width="800"
        x="0"
        :fill="bgColor"
      />
      <rect
        id="svg_5"
        stroke-opacity="0.6"
        stroke="#848484"
        height="500"
        width="75"
        y="0"
        x="0"
        :fill="sidebarColor"
      />
      <rect
        id="svg_6"
        stroke-width="0"
        stroke="#000"
        height="30"
        width="800"
        y="0"
        x="0"
        :fill="sidebarColor"
      />
      <ellipse
        id="svg_8"
        ry="20"
        rx="20"
        cy="67.27273"
        cx="38.45455"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_9"
        ry="20"
        rx="20"
        cy="178.93886"
        cx="37.62122"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_10"
        ry="20"
        rx="20"
        cy="122.27246"
        cx="38.45455"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_11"
        ry="20"
        rx="20"
        cy="234.77193"
        cx="38.45455"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_12"
        ry="20"
        rx="20"
        cy="288.34336"
        cx="39.16883"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_13"
        ry="20"
        rx="20"
        cy="466.20051"
        cx="38.45455"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <path
        id="svg_14"
        d="m95.63097,46l190,0l0,40l-190,0l0,-40z"
        opacity="undefined"
        stroke-width="0"
        stroke="#000"
        :fill="highlightColor"
      />
      <rect
        id="svg_16"
        stroke="#000"
        height="36"
        width="385.55554"
        y="100"
        x="95.88738"
        stroke-width="0"
        :fill="lightColor"
      />
      <rect
        id="svg_17"
        stroke="#000"
        height="36.33987"
        width="93.72548"
        y="100"
        x="683.13725"
        stroke-width="0"
        :fill="primaryColor"
      />
      <path
        id="svg_18"
        stroke="#000"
        d="m102.15405,202.92309l201.53847,0l0,126.15385l-201.53847,0l0,-126.15385z"
        opacity="undefined"
        stroke-width="0"
        :fill="lightColor"
      />
      <path
        id="svg_19"
        stroke="#000"
        d="m332.55404,204.46154l204.61538,0l0,120.00001l-204.61538,0l0,-120.00001z"
        opacity="undefined"
        stroke-width="0"
        :fill="lightColor"
      />
      <path
        id="svg_20"
        stroke="#000"
        d="m569.47713,203.69231l204.61538,0l0,120.00001l-204.61538,0l0,-120.00001z"
        opacity="undefined"
        stroke-width="0"
        :fill="lightColor"
      />
      <path
        id="svg_21"
        d="m103.32328,348.3077l433.90763,0l0,143.84617l-433.90763,0l0,-143.84617z"
        opacity="undefined"
        stroke-width="0"
        :fill="lightColor"
        stroke="#000"
      />
      <line
        id="svg_22"
        y2="156.15385"
        x2="773.84615"
        y1="160"
        x1="93.07692"
        stroke="#444444"
        fill="none"
      />
      <ellipse
        id="svg_23"
        ry="10"
        rx="10"
        cy="61.27273"
        cx="767.79381"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_24"
        ry="10"
        rx="10"
        cy="61.27273"
        cx="742.79381"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_25"
        ry="10"
        rx="10"
        cy="60.77273"
        cx="717.79381"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
      <ellipse
        id="svg_26"
        ry="10"
        rx="10"
        cy="60.77273"
        cx="690.79381"
        stroke-width="0"
        stroke="#000"
        :fill="lightColor"
      />
    </g>
    <g v-else>
      <rect
        id="svg_7"
        :fill="bgColor"
        x="0"
        width="800"
        height="500"
        stroke="#000"
        stroke-width="0"
      />
      <rect
        id="svg_5"
        :fill="sidebarColor"
        x="0"
        y="0"
        width="75"
        height="500"
        stroke="#848484"
        stroke-opacity="0.6"
      />
      <rect
        id="svg_6"
        :fill="sidebarColor"
        x="0"
        y="0"
        width="800"
        height="30"
        stroke="#000"
        stroke-width="0"
      />
      <ellipse
        id="svg_8"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="38.45455"
        cy="67.27273"
        rx="20"
        ry="20"
      />
      <ellipse
        id="svg_10"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="38.45455"
        cy="122.27246"
        rx="20"
        ry="20"
      />
      <ellipse
        id="svg_13"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="38.45455"
        cy="465.22012"
        rx="20"
        ry="20"
      />
      <path
        id="svg_14"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        opacity="undefined"
        d="m95.63097,46l190,0l0,40l-190,0l0,-40z"
      />
      <rect
        id="svg_16"
        :fill="lightColor"
        stroke-width="0"
        x="95.88738"
        y="100"
        width="385.55554"
        height="36"
        stroke="#000"
      />
      <rect
        id="svg_17"
        stroke="#000"
        :fill="primaryColor"
        stroke-width="0"
        x="670.4981"
        y="430.96766"
        width="113.88342"
        height="48.22935"
      />
      <line
        id="svg_22"
        fill="none"
        stroke="#444444"
        x1="93.07692"
        y1="160"
        x2="773.84615"
        y2="156.15385"
      />
      <ellipse
        id="svg_23"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="191.85394"
        cy="469.54342"
        rx="10"
        ry="10"
      />
      <ellipse
        id="svg_24"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="166.85394"
        cy="469.54342"
        rx="10"
        ry="10"
      />
      <ellipse
        id="svg_25"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="141.85394"
        cy="469.04342"
        rx="10"
        ry="10"
      />
      <ellipse
        id="svg_26"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="114.85394"
        cy="469.04342"
        rx="10"
        ry="10"
      />
      <ellipse
        id="svg_1"
        :fill="lightColor"
        stroke="#000"
        stroke-width="0"
        cx="39.15385"
        cy="173.32141"
        rx="20"
        ry="20"
      />
    </g>

  </svg>
</template>
<script setup lang=ts>
const props = defineProps<{
  dark?: boolean
  type: 'default' | 'focus'
}>()
const lightColor = computed(() => props.dark ? '#303030' : '#eee')
const highlightColor = computed(() => props.dark ? '#404040' : '#ddd')
const bgColor = computed(() => props.dark ? '#1c1c1c' : '#fff')
const sidebarColor = computed(() => props.dark ? '#111111' : '#e0e0e0FF')
const primaryColor = computed(() => props.dark ? '#4caf50' : '#1976D2')
</script>
